import React, { Component } from "react";
import "./Duanzi.css";
import axios from "axios";

export default class Duanzi extends Component {
    //声明状态
    state = {
        //1. 声明状态
        duanzis: []
    }

    render() {
        return (
            <div>
                <h2>
                    段子列表{" "}
                    <button onClick={this.getDuanzi}>点击获取段子</button>
                </h2>
                <hr />
                <table border="1">
                    <thead>
                        <tr>
                            <td>ID</td>
                            <td>作者</td>
                            <td>内容</td>
                        </tr>
                    </thead>
                    <tbody>
                        {/* 3. 列表渲染 */}
                        {
                            this.state.duanzis.map(item => {
                                return <tr key={item.id}>
                                            <td>{item.id}</td>
                                            <td>{item.name}</td>
                                            <td>{item.text}</td>
                                        </tr>
                            })
                        }
                        
                    </tbody>
                </table>
            </div>
        );
    }

    getDuanzi = async () => {
        try {
            //发送 AJAX 请求
            let result = await axios("http://api.xiaohigh.com/duanzi");
            //获取段子数据 『响应体』
            let {data} = result;
            //修改状态 保存段子数据
            this.setState({
                duanzis: data
            })
        } catch (e) {
            console.log(e);
        }
    };

    //组件挂载完毕  2. 发送 AJAX 请求
    async componentDidMount(){
        try {
            //发送 AJAX 请求
            let result = await axios("http://api.xiaohigh.com/duanzi");
            //获取段子数据 『响应体』
            let {data} = result;
            //修改状态 保存段子数据
            this.setState({
                duanzis: data
            })
        } catch (e) {
            console.log(e);
        }
    }
}
